/**
 * 临时步骤编辑
 */
 import { useForm } from "../../framework/common/context/metadata-context";
 import {getQuery} from "../../framework/common/utils"
 import "./approveStepReadonly.css"
import Operations from "./Operations";
import React, { useEffect, useRef, useState } from "react";
import clsx from "clsx";
import { Tooltip , Input, Radio, Space, Checkbox, Spin } from "antd";
import get from "lodash/get";
import message from "../../framework/common/utils/message";
import request from "../../framework/common/utils/request";
import getInitiateFormData from "../../framework/common/utils/getInitiateFormData";
import BranchChoose from "./BranchChoose1";
import {v4 as uuid} from 'uuid'
import { InjectProvider, useInject } from "../../framework/common/context/inject-context";
import TemporaryStep from "./TemporaryStep1";//临时步骤模板
import { deleteTemporaryStep } from "./ApproveStepEdit/utility";
import { useUpdate } from "ahooks";
import SelectAuditors from "../SelectAuditors/SelectAuditors";

export default function({
    item = {},//当前临时步骤
    tplData = {},
    params = {},
    ind = null,
    approveSteps=[],//完整步骤
    actual_steps=[],//实际步骤
    parentUpdater=null,
    urlPrefix= null,
    temporaryStepCache,
    approveStepsRef,
    actual_stepsRef,
    selectStepId
}){
    if(ind === null){
        console.log("临时步骤缺少ind");
        return null;
    }
    let updater = useUpdate();

    //更新父组件信息
    function updateParentUpdater(){
        parentUpdater && parentUpdater()
    }


    let step = item;//当前步骤
    let p_step = actual_steps.find(function(s) {
        return s.id == step.id;
    });//actual_steps步骤内的当前步骤，需要同时修改

    let multiSelect = step.stepAttrs && step.stepAttrs.multi_type == "Multi";

    //步骤名称必填状态
    const inputStatusRef = useRef(null);
    let inputStatus = inputStatusRef.current;

    //步骤责任人必填状态
    const nodeStatusRef = useRef(null);
    let nodeStatus = nodeStatusRef.current;
    
    return <div className="item_main">
        <div className="step_name">
            {item.name}
        </div>
        <div 
            className="deleteBtn" 
            onClick={
                ()=>{
                    deleteTemporaryStep({
                        dataPath: ind,
                        approveSteps: approveSteps,
                        actual_steps: actual_steps,
                        temporaryStepCache: temporaryStepCache,
                        approveStepsRef: approveStepsRef,
                        actual_stepsRef: actual_stepsRef,
                        selectStepId: selectStepId
                    })
                }
            }
            data-path={ind}
        >
            <i className="iconfont icon-shanchu"></i>
        </div>
        <ul style={{'marginTop': '16px'}}>
            <li>
                <span className="item_label">步骤类型</span>
                <span className="item_content">
                    <Radio.Group
                        onChange={(e)=>{
                            item.stepAttrs.handle_mode = e.target.value;//更新 approveSteps
                            p_step.stepAttrs.handle_mode = e.target.value;//更新 actual_steps
                            updater();
                            updateParentUpdater();
                        }}
                        value={item?.stepAttrs?.handle_mode}>
                        <Radio
                            className={clsx('select-step-attr')} 
                            value="Serial"
                            name={item.id}
                            data-path={ind}
                            data-index={ind}
                        >串行</Radio>
                        <Radio
                            className={clsx('select-step-attr')} 
                            value="Parallel"
                            name={item.id}
                            data-path={ind}
                            data-index={ind}
                        >并行</Radio>
                    </Radio.Group>
                </span>
            </li>
            <li className="t_step_name mt-10px">
                <span className="item_label">步骤名称<span className="require text-color-f86161"> *</span></span>
                <Input 
                    placeholder="请输入步骤名称"
                    value={item.name}
                    status={inputStatus}
                    onChange={(e)=>{
                        item.name = e.target.value;//更新 approveSteps
                        p_step.name = e.target.value;//更新 actual_steps
                        updater();
                    }}
                    onBlur={()=>{
                        //校验步骤名称必填
                        if(step.name.trim() === ""){
                            inputStatusRef.current = "error";
                        }else{
                            inputStatusRef.current = "";
                        }
                        updateParentUpdater();
                    }}
                    className="layui-input temporaryStepName item_content"
                    data-path={ind} maxLength="50"/>
            </li>
            <li className="t_step_nodes mt-10px">
                <span className="item_label">责任人<span className="require text-color-f86161"> *</span></span>
                <div className="person item_content inline-block">
                    <SelectAuditors
                        data-path={ind}
                        CurUserGUID={tplData.CurUserGUID} 
                        placeholder={"请选择责任人"}
                        package_id={tplData.package_id}
                        CurUserDepartmentGUID={tplData.CurUserDepartmentGUID} 
                        urlPrefix={urlPrefix}
                        multiSelect={multiSelect}
                        status={nodeStatus}
                        popupContainer={()=>{
                            return document.querySelector(".js-steps_wrap")
                        }}
                        onChange={(data)=>{

                            //把责任人回写到步骤信息内
                            step.nodes = data;
                            if (step.nodes.length) {
                                step.nodes.map(function(item, i) {
                                    item.Checked = true;
                                });
                            }
                            step.is_user_reset_activity = 1;
                            p_step.nodes = data;
                            p_step.is_user_reset_activity = 1;

                            //校验步骤选人必填
                            if (step.nodes.length > 0) {
                                nodeStatusRef.current = "";//取消必填校验
                            } else {
                                nodeStatusRef.current = "error";//增加必填校验
                            }

                            updater();
                            updateParentUpdater();
                        }}
                        title={"责任人"}
                    ></SelectAuditors>
                </div>
            </li>
        </ul> 
        <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
        <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong" style={{"color":"#c7cac7"}}></i>
        <div className="border_arrow"></div>
    </div>
}